<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>图文详情</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/circle.css">
    
    <style>
       html,body{
           background: transparent;
       }
    </style>
</head>

<body style="height: 100%;">
    <div class="app" v-cloak>
        <!-- 评论 -->
        <div class="circle-comment-pop-box">
            <div class="circle-comment-pop-close" @click="closeCurrentFrame"></div>
            <div class="circle-comment-box">
                <div class="circle-comment-head">{{commentNumber}}条评论</div>
                <div class="circle-comment-list " :class="isIos ? 'paddingBottom' : ''">
                    <div class="circle-comment-list-item" v-for="(item, index) in commentLists" :key="'comment' + index">
                        <img class="circle-comment-item-avator" :src="!!item.headImg ? item.headImg : 'https://cdn.tiexiemall.com/static/user/default.png'" alt="avator">
                        <div class="circle-comment-item-box">
                            <div class="circle-comment-item-main">
                                <div class="circle-comment-list-content">
                                    <div class="circle-comment-item-title">{{ item.nickName }}</div>
                                    <div class="circle-comment-item-content" @click.stop="doWrite(item)">{{ item.content }}
                                        <span class="circle-comment-item-time">{{ item.publishTime }}</span>
                                    </div>
                                </div>
                                <div class="circle-comment-thumpup" @click="handleCommentThumpUp(item)">
                                    <img class="circle-comment-thumpup-img" :src="item.thumbsFlg ? thumpupActiveIcon : thumpupIcon" alt="thumpup">
                                    <p class="circle-comment-thumpup-num">{{ item.thumbsNum }}</p>
                                </div>
                            </div>
                            <div class="circle-comment-item-replay" v-if="item.childTopicComments && item.childTopicComments.length > 0">
                                <template v-for="(subItem, subIndex) in item.childTopicComments" >
                                    <div class="circle-comment-list-item" v-if="subIndex === 0 || item.showMore" :key="'replay' + subIndex">
                                        <img class="circle-comment-item-avator" :src="!!subItem.headImg ? subItem.headImg : 'https://cdn.tiexiemall.com/static/user/default.png'" alt="avator">
                                        <div class="circle-comment-list-content" @click.stop="doWrite(item,subItem)" >
                                            <div class="circle-comment-item-title" @click.stop="doWrite(item,subItem,subItem.userId,subItem.nickName)">{{ subItem.nickName }}</div>
                                            <div class="circle-comment-item-content">
                                                <span v-if="subItem.toNickName">回复 
                                                    <span class="circle-comment-replay-username" @click.stop="doWrite(item,subItem,subItem.toUserId,subItem.toNickName)">{{subItem.toNickName}}</span> 
                                                </span>
                                                {{ subItem.content }}
                                                <span class="circle-comment-item-time">{{ subItem.publishTime }}</span>
                                            </div>
                                        </div>
                                        <div class="circle-comment-thumpup" @click="handleCommentThumpUp(subItem)">
                                            <img class="circle-comment-thumpup-img" :src="subItem.thumbsFlg ? thumpupActiveIcon : thumpupIcon " alt="thumpup">
                                            <p class="circle-comment-thumpup-num">{{ subItem.thumbsNum }}</p>
                                        </div>
                                    </div>
                                </template>
                                <div v-if="!item.showMore && item.childTopicComments.length > 1" class="circle-comment-list-replay-morebtn" @click="showMoreComment(item, index)">展开{{item.childTopicComments.length - 1}}条回复</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="circle-comment-list-nomore">- 没有更多了 -</div>
            </div>
        </div>

        <!-- 评论输入框 -->
        <div class="dynamic_detail_write flex-x-s iphonex-padding-bottom" @click.stop="doWrite()">
            <input type="text" placeholder="说点什么吧~" maxlength="500"  readonly>
            <div class="send_btn">发送</div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/restful.js"></script>
    <script>
        apiready = function () {
            var inputField = api.require('inputField');
            vm = new Vue({
                el: '.app',
                data(){
                    return {
                        isIos:'', // 是否是ios
                        topicId: api.pageParam.topicId,
                        userInfo: api.pageParam.userInfo,
                        commentNumber: api.pageParam.userInfo.commentNum,
                        thumpupIcon: 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/thumpup_icon.png', // 未点赞状态
                        thumpupActiveIcon: 'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/circle/thumpup_selected_icon.png', // 点赞状态
                        commentLists: [],
                    }
                },
                mounted() {
                    this.init();
                    this.isIos = api.systemType == 'ios'
                },
                methods: {
                    // 数据初始化
                    init(_vm) {
                        const vm = _vm || this
                        // 请求加载更多数据
                        fnGet(interfaces.CONTENT_MODULE.CIRCLE.GET_MOMENTS, {topicId: vm.topicId }, false,
                            function (ret, err) {
                                console.log(JSON.stringify(ret))
                                if (ret && ret.code === RESPONSE_OK) {
                                    vm.commentLists = ret.data.momentComments
                                    vm.commentNumber = vm.commentLists.length
                                    console.log(JSON.stringify(vm.commentLists))

                                } else {
                                    toastBottom(ret ? ret.msg : '');
                                }
                            }
                        );

                    },
                    // 展开更多回复评论
                    showMoreComment(item, index){
                        this.$set(this.commentLists[index], 'showMore', true )
                    },
                    // 关闭当前frame
                    closeCurrentFrame(){
                        api.closeFrame({
                            name: 'circle_video_detail_comment_frame'
                        })
                    },

                    // 评论 点赞/取消点赞
                    handleCommentThumpUp(item){
                        const vm = this;
                        if (!checkToken()) return false;
                        circle("doComentThumb")(item, function(ret) {
                            item.thumbsFlg = !item.thumbsFlg;
                            vm.init()
                            if (item.thumbsFlg) {
                                item.thumbsNum += 1;
                                toastMiddle('点赞成功')
                            } else {
                                item.thumbsNum -= 1;
                                toastMiddle('取消点赞')
                            }
                        })
                    },

                    // 隐藏输入框
                    hideInput(e) {
                        inputField.close();
                        inputField.resignFirstResponder();
                    },

                    // 写评论
                    doWrite(comment, childComment, toUserId, toNickName) {
                        if(!checkToken()) return false;
                        let vm = this
                        let item = {}
                        if (comment) {
                            item = {
                                topicId: vm.topicId,
                                toUserId: comment.userId,
                                topicCommonId: comment.topicCommonId,
                                nickName: comment.nickName
                            }
                            if (childComment) {
                                item.topicCommonId = comment.topicCommonId
                                item.toUserId = childComment.toUserId
                                item.nickName = childComment.nickName
                            }
                            if (toUserId) {
                                item.toUserId = toUserId
                            }
                            if (toNickName) {
                                item.nickName = toNickName
                            }
                        } else {
                            item = {
                                topicId: vm.topicId,
                                toUserId: undefined,
                                topicCommonId: undefined,
                                nickName: ''
                            }
                        }
                        var tempName = item.nickName;
                        if (item.nickName !== '请输入') {
                            tempName = '回复' + item.nickName + ':'
                        }
                        inputField.open({
                            bgColor: '#f7f7f7',
                            lineColor: '#f7f7f7',
                            fileBgColor: '#fff',
                            borderColor: '#fff',
                            sendBtn: {
                                bg: '#3F8CEC', //字符串类型；发送按钮常态背景色
                                inputBg: '#3F8CEC', //(可选项)字符串类型；当输入文字发时送按钮的背景色；默认：bg的色值
                                bgHighlight: '#000', //字符串类型；发送按钮点击时的高亮背景色
                                title: '发送', //字符串类型；发送按钮的标题
                                titleSize: 13, //数字类型；发送按钮的标题字体大小
                                titleColor: '#fff', //字符串类型；发送按钮标题文字颜色
                                corner: 5, //数字类型；发送按钮圆角大小
                                sendW: 45, //数字类型；发送按钮的宽
                                sendH: 30, //数字类型；发送按钮的高
                                marginRight: 10, //数字类型；发送按钮距离屏幕右边的距离，本参数暂仅支持iOS平台；默认：10
                            },
                            placeholder: tempName,
                            placeholderStyles: {
                                color: '#c1c1c1', //字符串类型；占位文字颜色，支持rgb、rgba、#；默认：#696969
                                size: 15, //数字类型；占位文字大小；默认：13
                                marginL: 5,
                            },
                            fixedOn: api.frameName
                        }, function (ret, err) {

                            if (ret) {
                                if (!ret.msg || ret.msg == '') {
                                    toastMiddle('您还没有输入内容！');
                                    return false
                                }
                                const param = {
                                    content: ret.msg,
                                    toUserId: item.toUserId,
                                    topicCommentId: item.topicCommonId,
                                    topicId: item.topicId
                                }
                                fnPost(interfaces.CONTENT_MODULE.CIRCLE.COMMENTON_NEWS, param,
                                    function (ret, err) {
                                        if (ret && ret.code === RESPONSE_OK) {
                                            toastMiddle('评论成功');
                                            setTimeout(() =>{
                                                vm.init(vm)
                                                api.sendEvent({
                                                    name:'updateDataUserInfo',
                                                    extra: {
                                                        userInfo: vm.userInfo,
                                                        vid: vm.topicId
                                                    }
                                                })
                                            }, 600)
                                        } else {
                                            toastBottom(ret ? ret.msg : '');
                                        }
                                    }
                                );
                                inputField.close();
                                inputField.resignFirstResponder();
                            } else {
                                // alert(JSON.stringify(err));
                            }
                        });
                        inputField.becomeFirstResponder(function (ret, err) {
                            if (ret.status) {
                                // alert(JSON.stringify(ret));
                            } else {
                                // alert(JSON.stringify(err));
                            }
                        });
                    },
                    
                }

            })
        }
    </script>
</body>

</html>